<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Task Master - AI 驱动的任务管理解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #4f46e5, #a855f7);
            border-radius: 2px;
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #2d3748;
            border-radius: 8px;
            overflow: hidden;
        }
        .code-header {
            background-color: #1a202c;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }
        .code-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Claude Task Master</h1>
                    <p class="text-xl md:text-2xl font-light mb-8">AI 驱动的任务管理系统，为开发者而生</p>
                    <p class="text-lg mb-8 opacity-90">开源智能任务管理工具，集成 Claude、OpenAI 等 AI 模型，自动生成、分解和管理开发任务，提升软件开发效率。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/eyaltoledano/claude-task-master" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition duration-300 flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub 仓库
                        </a>
                        <a href="#getting-started" class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-lg font-semibold transition duration-300 flex items-center">
                            <i class="fas fa-rocket mr-2"></i> 快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-5 -left-5 w-20 h-20 bg-purple-300 rounded-full opacity-20"></div>
                        <div class="absolute -bottom-5 -right-5 w-32 h-32 bg-purple-400 rounded-full opacity-20"></div>
                        <div class="relative bg-white rounded-xl shadow-2xl p-6 text-gray-800">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="mb-4">
                                <div class="font-mono text-sm">
                                    <p class="text-indigo-600">$ task-master parse-prd prd.txt</p>
                                    <p class="text-green-600">✓ 已从 PRD 生成 12 个任务</p>
                                    <p class="text-indigo-600">$ task-master expand --id=5</p>
                                    <p class="text-gray-500"># 任务 5: 实现用户认证</p>
                                    <p class="text-gray-500 ml-4">- 设置 Express 路由</p>
                                    <p class="text-gray-500 ml-4">- 实现 JWT 认证</p>
                                    <p class="text-gray-500 ml-4">- 添加密码加密</p>
                                </div>
                            </div>
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="text-sm text-indigo-800 font-medium">💡 AI 建议: 考虑使用 bcrypt 进行密码哈希</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Problem Section -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">它能解决什么问题？</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl border border-gray-200">
                    <div class="flex items-center mb-4">
                        <div class="bg-red-100 p-3 rounded-full mr-4">
                            <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">传统工具的痛点</h3>
                    </div>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-red-400 mt-1 mr-2 text-sm"></i>
                            <span>复杂的工作流配置耗时费力</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-red-400 mt-1 mr-2 text-sm"></i>
                            <span>任务分解缺乏智能化，依赖人工</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-red-400 mt-1 mr-2 text-sm"></i>
                            <span>频繁切换工具导致上下文中断</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-red-400 mt-1 mr-2 text-sm"></i>
                            <span>缺乏与 AI 模型的深度集成</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-indigo-50 p-8 rounded-xl border border-indigo-100">
                    <div class="flex items-center mb-4">
                        <div class="bg-indigo-100 p-3 rounded-full mr-4">
                            <i class="fas fa-lightbulb text-indigo-600 text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">我们的解决方案</h3>
                    </div>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2 text-sm"></i>
                            <span>AI 自动从 PRD 生成结构化任务</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2 text-sm"></i>
                            <span>智能分解复杂任务为可执行子任务</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2 text-sm"></i>
                            <span>与编辑器深度集成，减少上下文切换</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-indigo-600 mt-1 mr-2 text-sm"></i>
                            <span>AI 研究支持，融入最佳实践</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">核心功能概述</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自动任务生成</h3>
                    <p class="text-gray-600">从产品需求文档(PRD)中解析需求，自动生成包含依赖关系、优先级和测试策略的结构化任务列表，大幅减少手动规划时间。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-sitemap"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能任务分解</h3>
                    <p class="text-gray-600">通过AI将复杂任务拆分为可执行的子任务，支持基于项目上下文或外部研究的最佳实践，增强任务可操作性。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-tasks"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">任务状态跟踪</h3>
                    <p class="text-gray-600">支持任务状态(待办/进行中/完成)管理，提供简洁的CLI命令来查看和移动任务状态，简化工作流管理。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AI研究支持</h3>
                    <p class="text-gray-600">结合项目上下文进行技术研究，如查询最新技术最佳实践(如JWT认证)，并将结果融入任务规划，提升决策质量。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">编辑器集成</h3>
                    <p class="text-gray-600">通过Model Control Protocol(MCP)与Cursor、VS Code等编辑器集成，支持在编辑器中直接调用AI完成任务操作。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多模型支持</h3>
                    <p class="text-gray-600">支持Claude、OpenAI、Google Gemini等多种AI模型，根据需求灵活选择最适合的AI助手。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">使用场景</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-indigo-50 p-6 rounded-xl">
                    <div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-user-astronaut text-indigo-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">独立开发者</h3>
                    <p class="text-gray-700 mb-4">快速从PRD生成可执行任务，AI辅助实现，减少手动规划时间。</p>
                    <div class="bg-white p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">
                            <span class="text-indigo-600 font-bold">示例:</span> 从"实现用户认证"任务分解出"设置Express路由"、"实现JWT认证"等子任务
                        </p>
                    </div>
                </div>
                <div class="bg-purple-50 p-6 rounded-xl">
                    <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-users text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">小型团队</h3>
                    <p class="text-gray-700 mb-4">初始化项目，分配任务并跟踪进度，利用AI研究最新技术实践。</p>
                    <div class="bg-white p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">
                            <span class="text-purple-600 font-bold">示例:</span> 研究React Query v5迁移策略，生成上下文相关任务
                        </p>
                    </div>
                </div>
                <div class="bg-blue-50 p-6 rounded-xl">
                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-puzzle-piece text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">复杂功能实现</h3>
                    <p class="text-gray-700 mb-4">分解复杂功能为详细子任务，基于代码库分析提供建议。</p>
                    <div class="bg-white p-4 rounded-lg">
                        <p class="text-sm font-medium text-gray-600">
                            <span class="text-blue-600 font-bold">示例:</span> 支付系统集成分解为"集成Stripe API"、"添加支付错误处理"等子任务
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">优势与特色</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="bg-white p-6 rounded-xl shadow-sm mb-8">
                        <h3 class="text-xl font-bold mb-4 text-indigo-600 flex items-center">
                            <i class="fas fa-star mr-2"></i> 独特优势
                        </h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-brain text-indigo-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">AI深度集成</h4>
                                    <p class="text-gray-600 text-sm">支持Claude、OpenAI、Google Gemini等多种模型，自动化任务生成与研究</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-code text-indigo-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">编辑器原生支持</h4>
                                    <p class="text-gray-600 text-sm">通过MCP与Cursor、VS Code无缝协作，无需离开编辑器管理任务</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fab fa-github text-indigo-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">开源与可定制</h4>
                                    <p class="text-gray-600 text-sm">基于MIT许可(带Commons Clause)，适合需要本地部署的团队</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-indigo-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-project-diagram text-indigo-600 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">上下文感知</h4>
                                    <p class="text-gray-600 text-sm">结合代码库和外部研究生成任务，比通用工具更贴合开发需求</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div class="bg-white p-6 rounded-xl shadow-sm">
                        <h3 class="text-xl font-bold mb-4 text-orange-500 flex items-center">
                            <i class="fas fa-exclamation-triangle mr-2"></i> 当前局限性
                        </h3>
                        <ul class="space-y-4">
                            <li class="flex items-start">
                                <div class="bg-orange-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-money-bill-wave text-orange-500 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">API成本</h4>
                                    <p class="text-gray-600 text-sm">依赖AI API可能增加成本，尤其对高频使用用户</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-orange-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-graduation-cap text-orange-500 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">学习曲线</h4>
                                    <p class="text-gray-600 text-sm">对非技术用户，CLI和配置文件的设置需要学习</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-orange-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-bug text-orange-500 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">稳定性问题</h4>
                                    <p class="text-gray-600 text-sm">部分功能(如Gemini模型支持)存在bug，可能影响稳定性</p>
                                </div>
                            </li>
                            <li class="flex items-start">
                                <div class="bg-orange-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <i class="fas fa-plug text-orange-500 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold">集成问题</h4>
                                    <p class="text-gray-600 text-sm">Claude Code集成在某些环境(如AWS Bedrock)可能失效</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="py-16 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">上手指南</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center text-indigo-600">
                            <i class="fas fa-download mr-2"></i> 安装
                        </h3>
                        <div class="code-block text-white mb-4">
                            <div class="code-header">
                                <div class="code-dot bg-red-500"></div>
                                <div class="code-dot bg-yellow-500"></div>
                                <div class="code-dot bg-green-500"></div>
                                <span class="text-gray-400 text-sm ml-2">全局安装</span>
                            </div>
                            <div class="p-4 font-mono text-sm">
                                <span class="text-green-400">$</span> npm install -g task-master-ai
                            </div>
                        </div>
                        <div class="code-block text-white">
                            <div class="code-header">
                                <div class="code-dot bg-red-500"></div>
                                <div class="code-dot bg-yellow-500"></div>
                                <div class="code-dot bg-green-500"></div>
                                <span class="text-gray-400 text-sm ml-2">本地安装</span>
                            </div>
                            <div class="p-4 font-mono text-sm">
                                <span class="text-green-400">$</span> npm install task-master-ai
                            </div>
                        </div>
                    </div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center text-indigo-600">
                            <i class="fas fa-cog mr-2"></i> 配置
                        </h3>
                        <div class="code-block text-white">
                            <div class="code-header">
                                <div class="code-dot bg-red-500"></div>
                                <div class="code-dot bg-yellow-500"></div>
                                <div class="code-dot bg-green-500"></div>
                                <span class="text-gray-400 text-sm ml-2">.cursor/mcp.json</span>
                            </div>
                            <div class="p-4 font-mono text-sm overflow-x-auto">
                                <pre>{
  "mcpServers": {
    "task-master-ai": {
      "command": "npx",
      "args": ["-y", "--package=task-master-ai", "task-master-ai"],
      "env": {
        "ANTHROPIC_API_KEY": "your_key_here"
      }
    }
  }
}</pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="mb-8">
                        <h3 class="text-xl font-bold mb-4 flex items-center text-indigo-600">
                            <i class="fas fa-play mr-2"></i> 基本用法
                        </h3>
                        <div class="space-y-4">
                            <div class="code-block text-white">
                                <div class="code-header">
                                    <div class="code-dot bg-red-500"></div>
                                    <div class="code-dot bg-yellow-500"></div>
                                    <div class="code-dot bg-green-500"></div>
                                    <span class="text-gray-400 text-sm ml-2">初始化项目</span>
                                </div>
                                <div class="p-4 font-mono text-sm">
                                    <span class="text-green-400">$</span> task-master init<br>
                                    <span class="text-green-400">$</span> task-master init --rules cursor,vscode
                                </div>
                            </div>
                            <div class="code-block text-white">
                                <div class="code-header">
                                    <div class="code-dot bg-red-500"></div>
                                    <div class="code-dot bg-yellow-500"></div>
                                    <div class="code-dot bg-green-500"></div>
                                    <span class="text-gray-400 text-sm ml-2">生成任务</span>
                                </div>
                                <div class="p-4 font-mono text-sm">
                                    <span class="text-green-400">$</span> task-master parse-prd scripts/prd.txt<br>
                                    <span class="text-green-400">$</span> task-master expand --id=5 --subtasks=3
                                </div>
                            </div>
                            <div class="code-block text-white">
                                <div class="code-header">
                                    <div class="code-dot bg-red-500"></div>
                                    <div class="code-dot bg-yellow-500"></div>
                                    <div class="code-dot bg-green-500"></div>
                                    <span class="text-gray-400 text-sm ml-2">管理任务</span>
                                </div>
                                <div class="p-4 font-mono text-sm">
                                    <span class="text-green-400">$</span> task-master list<br>
                                    <span class="text-green-400">$</span> task-master set-status --id=3 --status=done
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold mb-12 text-center section-title">工作流程可视化</h2>
            <div class="bg-white p-6 rounded-xl">
                <div class="mermaid">
                    graph TD
                        A[产品需求文档PRD] --> B[AI解析需求]
                        B --> C[生成结构化任务]
                        C --> D[复杂任务分解]
                        D --> E[子任务列表]
                        E --> F[开发者实现]
                        F --> G[任务状态更新]
                        G --> H[项目完成]
                        B --> I[AI研究支持]
                        I --> C
                        F --> I
                        style A fill:#4f46e5,color:#fff
                        style B fill:#7c3aed,color:#fff
                        style C fill:#a855f7,color:#fff
                        style D fill:#c084fc,color:#fff
                        style E fill:#d8b4fe,color:#000
                        style F fill:#e9d5ff,color:#000
                        style G fill:#f3e8ff,color:#000
                        style H fill:#faf5ff,color:#000
                        style I fill:#6366f1,color:#fff
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>